<template>
  <div>
    <el-card :style="{marginTop:top+'px',width: 400+'px', height: 430+'px',margin: 'auto'}">
      <div style="text-align: center;">
        <h3>系统登录</h3>
        <el-form ref="form" :rules="rules" :model="form">
          <el-form-item prop="name">
            <el-input v-model="form.username" placeholder="请输入账号" prefix-icon="iconfont icon-yonghu">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="iconfont icon-password">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="11">
                <el-input v-model="form.verifycode" placeholder="请输入验证码"></el-input>
              </el-col>
              <el-col :span="11" :offset="2">
                <img src="../assets/verifycode.png" width="100%" height="40px"/>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="6">
                <el-switch
                  v-model="form.rememberMe">
                </el-switch>
                记住我
              </el-col>
              <el-col :span="18">
                <span style="color: red;">{{loginerror}}</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="11">
                <el-button style="width: 100%" type="danger">重置</el-button>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-button type="primary" style="width: 100%" @click="submitForm('form')">登录</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>

  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item.vue";

  import  axios from 'axios'
  import  qs from 'qs'
  export default {
    components: {
      ElFormItem,
      ElCol
    },
    data() {
      return {
        rules: {
          username: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ]
        },
        loginerror: "",
        form: {
          username: "",
          verifycode: "",
          password: "",
          rememberMe: true
        },
        top:0
      }
    },
    mounted(){
      this.top = document.documentElement.clientHeight / 2 - 215;
      var that = this ;
      window.onresize = function(){
        that.top = document.documentElement.clientHeight / 2 - 215;
      }
    },
    methods: {
      submitForm(formName) {
        var that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //去后台登录
            axios.post("/sys/lxlogin",qs.stringify(that.form)).then(res=>{
              if(res.data.code=='200'){
                sessionStorage.setItem("user","aaa")
                that.$router.push("/home")
              }else{
                that.loginerror = res.data.message;
              }
            })

          } else {
            return false;
          }
        });
      },

    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
